<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '倍阅读共读计划',
	},
}
</route>

<template>
	<view class="page-plan-details">
		<fly-navbar backgroundColor="#F6F7F9" leftText="倍阅读共读计划" fixed />
		<view class="w-full px-[34rpx] py-[22rpx] box-border" v-if="thisPage === 1">
			<view class="w-full">
				<view class="w-full rounded-[30rpx] px-4 py-4 box-border bg-white plan-item">
					<view class="text-[#303030] text-[43rpx] truncate line-clamp">{{
						detailsInfo.title
					}}</view>
					<view class="text-[#303030] text-[28rpx] truncate line-clamp mt-1"
						>{{ detailsInfo.startTime }}-{{ detailsInfo.endTime }}</view
					>
					<view
						class="w-full flex justify-between items-center mt-[58rpx]"
						v-if="detailsInfo.status === 1"
					>
						<view
							v-if="detailsInfo.type !== 3"
							class="flex items-center justify-between px-[25rpx] h-[63rpx] rounded-[30rpx]"
							style="background: #f3f3f5"
							@tap="
								linkUrl(
									'/pages-plan/partici-record/index?id=' + query.id + '&type=' + detailsInfo.type,
								)
							"
						>
							<text class="text-[#34A4E2] text-[25rpx] mr-[43rpx]"
								>{{ detailsInfo.join_total || 0 }}人已参与</text
							>
							<view class="flex items-center">
								<image
									class="w-[47rpx] h-[47rpx] rounded-[50%] mr-[10rpx]"
									:src="baseImg + '/user-default.png'"
								></image>
								<image
									class="w-[20rpx] h-[20rpx]"
									:src="baseImg + '/class/class-right.png'"
								></image>
							</view>
						</view>
						<view
							v-if="detailsInfo.type !== 3 && userInfo.class_id"
							class="flex items-center justify-between px-[25rpx] h-[63rpx] rounded-[30rpx]"
							style="background: #f3f3f5"
							@tap="linkUrl('/pages-plan/class/roster/index?id=' + query.id)"
						>
							<image
								class="w-[30rpx] h-[30rpx] mr-[13rpx]"
								:src="baseImg + '/plan/plan-ranking.png'"
							></image>
							<text class="text-[#474747] text-[25rpx]">班级排行</text>
						</view>
						<view
							v-if="detailsInfo.type === 3"
							class="flex items-center justify-between px-[25rpx] h-[63rpx] rounded-[30rpx]"
							style="background: #f3f3f5"
							@tap="
								linkUrl(
									'/pages-plan/partici-record/index?id=' + query.id + '&type=' + detailsInfo.type,
								)
							"
						>
							<text class="text-[25rpx] text-[#34A4E2]"
								>{{ detailsInfo.join_total || 0 }}人已参与</text
							>
							<text class="text-[25rpx] text-[#919191] ml-4"
								>{{ detailsInfo.no_total || 0 }}人待参与</text
							>
						</view>
					</view>
					<view
						class="w-full flex items-center justify-between px-[25rpx] h-[63rpx] rounded-[30rpx] box-border mt-[58rpx]"
						style="background: #f3f3f5"
						v-else
					>
						<text class="text-[#34A4E2] text-[25rpx]">该共读计划已结束，下方书目信息仅供参考</text>
					</view>
				</view>

				<view
					class="w-full h-[200rpx] grid grid-cols-2 gap-x-4 mt-4"
					v-if="detailsInfo.status !== 0"
				>
					<view class="w-full h-full">
						<view
							:style="{
								background:
									detailsInfo.status === 1
										? detailsInfo.user_collect_book === detailsInfo.book_total
											? '#FAC22C'
											: '#37CA68'
										: '#DEDEDE',
							}"
							class="w-full h-full relative py-[40rpx] px-[35rpx] box-border rounded-[27rpx] flex flex-col justify-between"
							@tap.stop="receivePlan"
						>
							<image
								:src="
									detailsInfo.status === 1
										? detailsInfo.user_collect_book === detailsInfo.book_total
											? '/static/plan-point.jpg'
											: baseImg + '/ic-book.png'
										: baseImg + '/ic-book-gray.png'
								"
								class="bottom-0 absolute right-[34rpx] w-[100rpx] h-[90rpx] z-0"
							></image>

							<block v-if="detailsInfo.status === 1">
								<block v-if="detailsInfo.user_collect_book === detailsInfo.book_total">
									<text class="text-[#fff] text-[29rpx]">本期书目全部读完</text>
									<view
										class="text-[#fff] text-[29rpx] flex items-center z-10"
										v-if="detailsInfo.can_collect_integral"
									>
										领取奖励积分 +{{ detailsInfo.plan_integral
										}}<image
											:src="baseImg + '/book/book-receive.png'"
											class="w-[27rpx] h-[27rpx] ml-[10rpx]"
										></image>
									</view>
									<view class="text-[#fff] text-[29rpx] flex items-center z-10" v-else>
										<radio color="#fff" style="transform: scale(0.65)" :checked="true" />
										已领取奖励积分
									</view>
								</block>
								<block v-else>
									<text class="text-[#fff] text-[29rpx]">读完图书/总书目</text>
									<view class="text-[50rpx] text-[#fff] font-bold z-10">
										{{ detailsInfo.user_collect_book
										}}<text class="text-[29rpx]">/{{ detailsInfo.book_total }}</text>
									</view>
								</block>
							</block>

							<text v-else class="text-[#9B9B9B] text-[29rpx]">本期共读计划已结束</text>
						</view>
					</view>
					<view class="w-full h-full relative">
						<view
							:style="{
								background:
									detailsInfo.status !== 1 && !detailsInfo.user_collect_integral
										? '#DEDEDE'
										: '#5184F6',
							}"
							class="w-full h-full rounded-[27rpx] relative py-[40rpx] px-[35rpx] box-border flex flex-col justify-between"
						>
							<image
								:src="
									detailsInfo.status !== 1 && !detailsInfo.user_collect_integral
										? baseImg + '/ic-point-gray.png'
										: baseImg + '/ic-point.png'
								"
								class="bottom-0 absolute right-[34rpx] w-[100rpx] h-[90rpx]"
							></image>
							<block v-if="detailsInfo.status === 1">
								<text class="text-[#fff] text-[29rpx]">获得积分/总积分</text>
								<view class="text-[50rpx] text-[#fff] font-bold z-10">
									{{ detailsInfo.user_collect_integral
									}}<text class="text-[29rpx]">/{{ detailsInfo.total_integral }}</text>
								</view>
							</block>
							<block v-else-if="detailsInfo.user_collect_integral">
								<text class="text-[#fff] text-[29rpx]">参与共读获得积分</text>
								<view class="text-[50rpx] text-[#fff] font-bold z-10">
									{{ detailsInfo.user_collect_integral }}
								</view>
							</block>
							<block v-else>
								<text class="text-[#9B9B9B] text-[29rpx]">当前学生未参与共读</text>
							</block>
						</view>
					</view>
				</view>

				<view class="w-full bg-white rounded-[30rpx] px-4 py-4 box-border plan-item mt-4">
					<view class="w-full grid grid-cols-2 relative" v-if="detailsInfo.status === 1">
						<view
							class="text-[#303030] font-bold w-full text-center relative"
							@tap="choseTab('unfinished')"
							:style="{ color: tabKey === 'unfinished' ? '#34A4E2' : '#303030' }"
						>
							未完成
							<text
								v-if="tabKey === 'unfinished'"
								class="absolute w-[29rpx] h-[14rpx] rounded-[7rpx] -bottom-[23rpx] left-[50%] -translate-x-[50%]"
								style="background: #34a4e2"
							></text>
						</view>
						<text
							class="absolute w-[3rpx] h-[19rpx] top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]"
							style="background: #e2e2e2"
						></text>
						<view
							@tap="choseTab('finished')"
							class="text-[#303030] font-bold w-full text-center relative"
							:style="{ color: tabKey === 'finished' ? '#34A4E2' : '#303030' }"
						>
							已读完
							<text
								v-if="tabKey === 'finished'"
								class="absolute w-[29rpx] h-[14rpx] rounded-[7rpx] -bottom-[23rpx] left-[50%] -translate-x-[50%]"
								style="background: #34a4e2"
							></text
						></view>
					</view>
					<view class="w-full flex items-center justify-between" v-else>
						<text class="text-[33rpx] font-bold text-[#303030] box-border">共读书目</text>
						<view class="flex items-center" @tap="ruleModal(true)">
							<text class="text-[#C6C6C6] text-[21rpx]">共读积分规则说明</text>
							<view
								class="ml-1 rounded-[50%] h-[24rpx] text-[18rpx] w-[24rpx] flex justify-center items-center text-[#F0F0F2]"
								style="background: #c6c6c6"
								>?</view
							>
						</view>
					</view>

					<view class="w-full mt-4" v-if="list.length">
						<view
							v-for="item in list"
							:key="item.id"
							@tap="toBook(item.id)"
							class="bg-white rounded-[30rpx] relative py-4 box-border flex justify-between items-center mb-4 last:mb-0"
						>
							<image class="w-[212rpx] h-[250rpx] rounded-[30rpx]" :src="item.cover_img"></image>
							<view class="flex-1 pl-2 py-2 h-[250rpx] box-border flex flex-col justify-between">
								<view class="w-full flex flex-col">
									<text class="text-[33rpx] font-bold text-[#303030] box-border">{{
										item.name
									}}</text>
									<text class="text-[22rpx] text-[#303030] mt-1">{{ item.author || '-' }}</text>
									<rich-text
										class="text-[22rpx] text-[#919191] mt-1 line-clamp-2"
										:nodes="item.descript"
									></rich-text>
								</view>
								<view
									:class="[
										'w-full',
										'flex',
										item.study_total ? 'justify-between' : 'justify-end',
										'items-center',
									]"
									v-if="item.progress === 0"
								>
									<view
										class="relative px-4 h-[38rpx] flex justify-center text-[#fff] text-[21rpx] items-center border-1 border-solid border-[#F1F1F1] rounded-[17rpx]"
										style="width: fit-content; background: #2ba5e0"
										v-if="item.study_total"
									>
										<view class="flex items-center mr-2" v-if="item.student_avatar.length">
											<image
												class="w-[47rpx] h-[47rpx] -ml-[37rpx] border-1 border-solid border-[#fff] rounded-[50%]"
												v-for="cited in item.student_avatar"
												:key="cited"
												:src="cited || baseImg + '/user-default.png'"
											></image>
										</view>
										{{ item.study_total }}
										人读过</view
									>
									<view
										class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-[25rpx] flex justify-center items-center"
										:style="{ background: '#2BA5E0' }"
										>开始学习</view
									>
								</view>
								<view
									class="w-full flex justify-between items-center"
									v-if="item.progress > 0 && item.progress < 100"
								>
									<view class="flex items-center">
										<image
											class="w-[50rpx] h-[50rpx] rounded-[50%] mr-1"
											:src="userInfo.avatar || baseImg + '/user-default.png'"
										></image>
										<view class="w-[153rpx] flex flex-col items-center justify-center">
											<text class="text-[#48C855] text-[21rpx]">学习进度{{ item.progress }}%</text>
											<view
												class="w-full h-[11rpx] relative rounded-[5rpx] overflow-hidden"
												:style="{ background: '#F2F0F3' }"
											>
												<view
													class="h-full absolute top-0 left-0 rounded-tl-[5rpx] rounded-bl-[5rpx]"
													:style="{ background: '#48C855', width: 37 + '%' }"
												></view>
											</view>
										</view>
									</view>
									<view
										class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-[25rpx] flex justify-center items-center"
										:style="{ background: '#48C855' }"
										>继续学习</view
									>
								</view>
								<view class="w-full flex justify-between items-center" v-if="item.progress === 100">
									<view class="flex items-center">
										<image
											class="w-[50rpx] h-[50rpx] rounded-[50%] mr-1"
											:src="userInfo.avatar || baseImg + '/user-default.png'"
										></image>
										<view class="w-[153rpx] flex flex-col items-center justify-center">
											<text class="text-[#F1BF10] text-[21rpx]">已学完100%</text>
											<view
												class="w-full h-[11rpx] relative rounded-[5rpx] overflow-hidden"
												:style="{ background: '#F2F0F3' }"
											>
												<view
													class="h-full absolute top-0 left-0 w-full rounded-[5rpx]"
													:style="{ background: '#F1BF10' }"
												></view>
											</view>
										</view>
									</view>
									<view
										v-if="item.book_integral > 0"
										class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-[25rpx] flex justify-center items-center"
										:style="{ background: '#F1BF10' }"
										>再次学习</view
									>
									<view
										v-else
										class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-[25rpx] flex justify-center items-center"
										:style="{ background: '#F1BF10' }"
										@tap.stop="receive(item)"
										>领取+{{ detailsInfo.single_book_integral
										}}<image
											:src="baseImg + '/book/book-receive.png'"
											class="w-[24rpx] h-[24rpx]"
										></image
									></view>
								</view>
							</view>
						</view>
					</view>
					<view class="mt-4" v-else>
						<no-page height="460rpx" title="暂无数据"></no-page>
					</view>
				</view>
			</view>
		</view>
		<no-page
			v-if="thisPage === 0 || (thisPage === 1 && !detailsInfo)"
			height="600rpx"
			:type="type"
			:title="title"
			:btnTitle="btnTitle"
			@click="retry"
		></no-page>
		<uni-popup ref="popup" :mask-click="false" background-color="none">
			<view class="w-full px-4 box-border">
				<view class="w-full rounded-[54rpx] rule-modal relative px-6 py-6 box-border">
					<view class="w-full relative">
						<image
							:src="baseImg + '/close-btn.png'"
							class="w-[44rpx] h-[44rpx] absolute right-0 top-0"
							@tap="ruleModal(false)"
						></image>
						<view class="text-center text-[#303030] text-[34rpx] font-bold">阅读积分规则说明</view>
						<view class="w-full mt-6 bg-white rounded-[30rpx] px-6 py-6 box-border rule-box">
							<view class="w-full mb-6">
								<view class="w-full px-6 box-border">
									<view
										class="w-full flex justify-center items-center rounded-[33rpx] h-[65rpx] text-[#fff] text-[33rpx]"
										style="background: #2ba5e0"
									>
										<image
											class="w-[30rpx] h-[30rpx] mr-1"
											:src="baseImg + '/ranking/rule-point.png'"
										></image>
										限单次获取
									</view>
								</view>
								<view class="w-full">
									<view class="text-[35rpx] text-[#303030] mt-2">注册登陆</view>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>首次绑定学生<text class="text-[#F9BE20] ml-2">+3</text></view
									>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>首次加入班级<text class="text-[#F9BE20] ml-2">+3</text></view
									>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>累计使用“倍阅读”7天<text class="text-[#F9BE20] ml-2">+5</text></view
									>
									<view class="text-[35rpx] text-[#303030] mt-2">阅读</view>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>图书首次阅读中测练每完成一站<text class="text-[#F9BE20] ml-2">+2</text></view
									>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>图书首次阅读完成<text class="text-[#F9BE20] ml-2">+5</text></view
									>
								</view>
							</view>
							<view class="w-full">
								<view class="w-full px-6 box-border">
									<view
										class="w-full flex justify-center items-center rounded-[33rpx] h-[65rpx] text-[#fff] text-[33rpx]"
										style="background: #2ba5e0"
									>
										<image
											class="w-[30rpx] h-[30rpx] mr-1"
											:src="baseImg + '/ranking/rule-point.png'"
										></image>
										可重复获取
									</view>
								</view>
								<view class="w-full">
									<view class="text-[35rpx] text-[#303030] mt-2">日常使用</view>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>每日登录<text class="text-[#F9BE20] ml-2">+1</text></view
									>
									<view class="text-[35rpx] text-[#303030] mt-2">共读计划</view>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>完成一个倍阅共读计划<text class="text-[#F9BE20] ml-2">+30</text></view
									>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>完成一个班级共读计划<text class="text-[#F9BE20] ml-2">+10</text></view
									>
									<view class="text-[35rpx] text-[#303030] mt-2">校园共享书屋</view>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>借阅一本图书<text class="text-[#F9BE20] ml-2">+2</text></view
									>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>归还一本图书<text class="text-[#F9BE20] ml-2">+2</text></view
									>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store';
import { getPlanDetails } from '@/service/plan';
import { getReceivePoint, getPlanReceive } from '@/service/user';
import { formatTime } from '@/utils';
import { toAuthPage } from '@/utils/jump';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const tabKey = ref('unfinished');
const query = ref(null);
const thisPage = ref(-1);
const detailsInfo = ref(null);
const title = ref('');
const list = ref([]);
const type = ref('msg');
const btnTitle = ref('重试');
const popup = ref(null);

onLoad(options => {
	if (options) {
		query.value = options;
	}
});

onShow(() => {
	if (!userInfo.value.student_id) {
		// 分享或者进入未登录
		thisPage.value = 0;
		type.value = 'btn';
		title.value = '还没有登录';
		btnTitle.value = '登录';
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		return;
	}
	if (query.value.id) {
		getDetailsInfo(query.value.id);
	} else {
		thisPage.value = 0;
		title.value = '查询失败';
	}
});

const ruleModal = flag => {
	if (flag) {
		popup.value.open();
	} else {
		popup.value.close();
	}
};

const linkUrl = (url: string) => {
	uni.navigateTo({
		url,
	});
};

const toBook = (id: number) => {
	if (id === undefined) return;
	if (!userInfo.value.student_id) {
		toAuthPage(
			{},
			{
				type: 'navigateTo',
				url: `/pages-book/details/index?id=${id}&plan_id=${query.value.id}`,
			},
		);
	} else {
		uni.navigateTo({
			url: `/pages-book/details/index?id=${id}&plan_id=${query.value.id}`,
		});
	}
};

const choseTab = (tab: string) => {
	tabKey.value = tab;
	if (tab === 'unfinished') {
		list.value = detailsInfo.value.book_list.filter(item => item.is_complete === 0);
	} else {
		list.value = detailsInfo.value.book_list.filter(item => item.is_complete === 1);
	}
};

const getDetailsInfo = async (id: number) => {
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getPlanDetails({ id });
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			res.data.startTime = formatTime(res.data.start_time, '年月日', false);
			res.data.endTime = formatTime(res.data.end_time, '年月日', false);
			res.data.user_collect_book = res.data.book_list.length
				? res.data.book_list.filter(item => item.is_complete === 1).length
				: 0;
			res.data.user_collect_integral = Number(res.data.user_collect_integral);
			detailsInfo.value = res.data;
			if (res.data.status === 1) {
				list.value = res.data.book_list.length
					? res.data.book_list.filter(item => item.is_complete === 0)
					: [];
			} else {
				list.value = res.data.book_list;
			}

			thisPage.value = 1;
		} else {
			thisPage.value = 0;
			type.value = 'btn';
			title.value = res.status_code === 200 ? '查询失败' : res.message;
		}
	} catch (error) {
		type.value = 'btn';
		thisPage.value = 0;
		title.value = '查询失败';
		uni.hideLoading();
	}
};

const retry = () => {
	if (!userInfo.value.student_id) {
		// 分享或者进入未登录
		toAuthPage({}, { type: 'redirectTo', url: '/pages/index/index' });
		return;
	}
	getDetailsInfo(query.value.id);
};

const receivePlan = async () => {
	if (
		detailsInfo.value.status === 1 &&
		detailsInfo.value.user_collect_book === detailsInfo.value.book_total &&
		detailsInfo.value.can_collect_integral
	) {
		uni.showLoading({
			title: '领取中...',
		});
		try {
			const res = await getPlanReceive({
				student_id: userInfo.value.student_id,
				plan_id: query.value.id,
			});
			uni.hideLoading();
			if (res.status_code === 200) {
				uni.showToast({
					icon: 'none',
					title: '领取成功',
					success: () => {
						retry();
					},
				});
			} else {
				uni.showToast({
					icon: 'none',
					title: res.message,
				});
			}
		} catch (error) {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: '领取失败,请重试',
			});
		}
	}
};

const receive = async item => {
	uni.showLoading({
		title: '领取中...',
	});
	try {
		const res = await getReceivePoint({
			student_id: userInfo.value.student_id,
			book_id: item.id,
			plan_id: query.value.id,
		});
		uni.hideLoading();
		if (res.status_code === 200) {
			uni.showToast({
				icon: 'none',
				title: '领取成功',
				success: () => {
					retry();
				},
			});
		} else {
			uni.showToast({
				icon: 'none',
				title: res.message,
			});
		}
	} catch (error) {
		uni.hideLoading();
		uni.showToast({
			icon: 'none',
			title: '领取失败,请重试',
		});
	}
};
</script>
<style lang="scss">
page {
	background-color: #f6f7f9;
}

.page-plan-details {
	radio .wx-radio-input.wx-radio-input-checked::before {
		color: #fac22c;
	}

	radio .wx-radio-input.wx-radio-input-checked {
		background-color: #fff;
		border-color: #fff;
	}
}
</style>
<style lang="scss" scoped>
.plan-item {
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
}

.rule-modal {
	background: linear-gradient(0deg, #fff, #aac6f8);
}

.rule-box {
	max-height: 700rpx;
	overflow-y: auto;
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 0rpx 14rpx 0rpx rgb(0 0 0 / 7%);
}
</style>
